<template>
  <div class="box-card">
    <div class="headPhoto">
      <img src="../../../assets/my-account.svg" alt="找不到了。。。。">
    </div>
    <div class="content">
      <span>私人账本</span>
    </div>
  </div>
</template>

<script setup lang="ts">

</script>

<style scoped lang="scss">
.box-card{
  display: flex;
  height: 94px;
  width: 281px;
  flex-direction: column;
  background-color:  rgba(253, 253, 253, 1);
  border-radius: 6px;
  border: 1px solid rgba(161, 161, 161, 1);
  .headPhoto{
    margin: 12px 12px 0 12px;
    image{
      width: 42px;
      height: 42px;
      border-radius: 42px;
    }
  }
  .content{
    margin: 6px 12px 12px 12px;
  }
}
.box-card:hover{
  box-shadow: rgba(161, 161, 161, 0.5) 3px 3px;
}
</style>